<template>
  <el-dialog title="分配权限" :visible="isShow" @close="closeEvent">
    <!-- show-checkbox:是否显示多选框 -->

    <!-- default-checked-keys:它的值会累加 -->
    <!-- el-tree选中某个节点
    1：el-tree 设置node-key=‘选中该项后值的字段名’
                 ref="tree"  用于调用它组件内的设置与获取节点的方法
    2:设置某节点让选中
       this.$refs.tree.setCheckedKeys([需要选中的权限点数据])
    3:获取选中节点的值
       选中的数据节点的值:this.$refs.tree.getCheckedKeys()====拿到已选节点的值

     -->
    <!-- :default-checked-keys="permIds" -->
    <!-- check-strictly:是否父子选择关联，默认是关联的(false)， 希望不关联  true就可以了 -->
    <el-tree
      ref="tree"
      check-strictly
      node-key="id"
      show-checkbox
      :data="list"
      :props="{ label: 'name', children: 'children' }"
    />
    <template #footer>
      <div style="text-align: center">
        <el-button @click="closeEvent">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { sysPermission } from '@/api/permission.js'
import { changeData } from '@/utils/index'
import { sysRoleId, sysRoleAssignPrem } from '@/api/setting'
export default {
  model: {
    prop: 'isShow',
    event: 'setIsShow'
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      //   isShow: false
      list: [],
      permIds: [],
      id: ''
    }
  },
  async created() {
    const res = await sysPermission()
    this.list = changeData(res.data, '0')
    console.log('所有权限数据', res)
  },
  methods: {
    closeEvent() {
      this.$emit('setIsShow', false)
      //   每一次关闭弹框就清空选择
      this.$refs.tree.setCheckedKeys([])
      //   this.permIds = []
    },
    // 用于获取当前角色的权限数据
    async getRoleInfo(id) {
      this.id = id
      const res = await sysRoleId(id)
      //   存储当前角色权限点数据(它的数据就是权限数据的集合)
      this.permIds = res.data.permIds
      //   设置需要选中的节点数据

      this.$refs.tree.setCheckedKeys(res.data.permIds)
      console.log('角色详情', res)
    },
    // 确定按钮点击
    async submit() {
      await sysRoleAssignPrem(this.id, this.$refs.tree.getCheckedKeys())
      this.$message.success('分配权限成功')
      this.closeEvent()
    }
  }
}
</script>
<style></style>
